<template>
  <div id="app">
    <div class="header">
      <img src="@/assets/images/linyishouye.jpg" alt="University Header" class="header-image">
    </div>
    <div class="main-content">
      <div class="sidebar">

        <div class="app-container">
          <el-row :gutter="20">
            <el-col :span="6" :xs="24">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>个人信息</span>
                </div>
                <div>
                  <div class="text-center">
                    <userAvatar :user="user" />
                  </div>
                  <ul class="list-group list-group-striped">
                    <li class="list-group-item">
                      <svg-icon icon-class="user" />姓名
                      <div class="pull-right">{{ user.nickName }}</div>
                    </li>
                    <li class="list-group-item">
                      <svg-icon icon-class="email" />教工号
                      <div class="pull-right">{{ user.jsNumber }}</div>
                    </li>
                    <li class="list-group-item">
                      <svg-icon icon-class="email" />学院
                      <div class="pull-right" v-if="user">{{ user.xyName }}</div>
                    </li>
                    <li class="list-group-item">
                      <svg-icon icon-class="phone" />手机号
                      <div class="pull-right" >{{ user.phonenumber }}</div>
                    </li>
                    <li class="list-group-item">
                      <svg-icon icon-class="peoples" />性别
                      <div class="pull-right">{{ getFormattedSex(user.sex) }}</div>
                    </li>
                    <li class="list-group-item">
                      <svg-icon icon-class="peoples" />角色
                      <div class="pull-right" >{{ roleGroup }}</div>
                    </li>
                    <li class="list-group-item">
                      <svg-icon icon-class="peoples" />职位
                      <div class="pull-right">{{ user.zwName }}</div>
                    </li>
                    <li class="list-group-item">
                      <svg-icon icon-class="tree" />状态
                      <div class="pull-right" >{{getFormattedStatus(user.status)}}</div>
                    </li>
                  </ul>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="content">
        <div class="notifications1">
          <div class="w100 bgff br-20 p-all-20">
            <div class="rows rowsm mb-10">
              <img
                src="../../assets/icons/svg/img.png"
                class="w-20 h-22 mr-10"
                alt=""
              />
              <div class="fw-b fs-18">待审核/待批阅</div>
            </div>
          </div>

          <div class="content1">
            <div class="approval-table">
                <div class="approval-header">
                <span>学生姓名</span>
                <span>项目类型</span>
                <span>时间</span>
<!--                <span>审核状态</span>-->
                <span>操作</span>
              </div>
              <div class="approval-item" v-for="(item, index) in approvalList" :key="index">
                <span>{{ item.stName }}</span>
                <span>{{ item.typeName }}</span>
                <span>{{ item.createTime }}</span>
<!--                <span>{{ item.status }}</span>-->
                <button @click="review(item)" class="review-button">审核</button>
              </div>
            </div>
          </div>
          <pagination
            v-show="total>0"
            :total="total"
            layout="total, prev, pager, next"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getExaminationApproval"
          />
          <!-- <div class="pagination">
            <button @click="changePage(pagination.pageNum - 1)" :disabled="pagination.pageNum === 1">上一页</button>
            <span>第 {{ pagination.pageNum }} 页</span>
            <button @click="changePage(pagination.pageNum + 1)"
                    :disabled="paginationTotalPages">下一页</button>
          </div> -->
        </div>


        <div class="notifications">
          <div class="w100 bgff br-20 p-all-20 h-450">
            <div class="rows rowsm mb-20">
              <img
                src="../../assets/icons/svg/icon_gg.png"
                class="w-20 h-22 mr-10"
                alt=""
              />
              <div class="fw-b fs-18">通知公告</div>
            </div>
            <div
              class="w100 rowsb rowsm mb-24 pointer"
              v-for="(item, index) in newsList"
              :key="index"
            >
              <div class="one_overflow w-326 fs-16 col333" @click="openNotificationModal(item)">
                {{ item.name }}</div>
              <div class="fs-12 col888">{{ item.createTime }}</div>
            </div>
          </div>
           <pagination
            layout="total, prev, pager, next"
            v-show="paginationNews.total>0"
            :total="paginationNews.total"
            :page.sync="paginationNews.pageNum"
            :limit.sync="paginationNews.pageSize"
            @pagination="getNewsLists"
          />
          <!-- <div class="pagination">
            <button @click="changePageNews(paginationNews.pageNum - 1)" :disabled="paginationNews.pageNum === 1">上一页</button>
            <span>第 {{ paginationNews.pageNum }} 页</span>
            <button @click="changePageNews(paginationNews.pageNum + 1)"
                    :disabled="totalPages">下一页</button>
          </div> -->
        </div>

        <div v-if="showNotificationModal" class="notification-modal">
<!--          <div class="modal-header">-->
<!--            {{ notificationTitle }}-->
<!--            <button @click="closeNotificationModal" class="close-button">X</button>-->
<!--          </div>-->
          <div class="modal-header">
            <div class="modal-title">{{ notificationTitle }}</div>
            <button @click="closeNotificationModal" class="close-button">X</button>
          </div>
          <div class="modal-body" v-html="notificationContent"></div>
        </div>


      </div>
    </div>


    <!--  基础劳动  -->
    <!-- 添加或修改宿舍/教/实验劳动对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="项目类型" prop="typeName">
          <el-input v-model="form.typeName" placeholder="请输入项目类型" readOnly/>
        </el-form-item>
        <el-form-item label="学生姓名" prop="stName">
          <el-input v-model="form.stName" placeholder="请输入学生姓名" readOnly/>
        </el-form-item>
        <el-form-item label="学号" prop="stNumber">
          <el-input v-model="form.stNumber" placeholder="学号" readOnly/>
        </el-form-item>
        <el-form-item label="学院" prop="xyName">
          <el-input v-model="form.xyName" placeholder="学院" readOnly/>
        </el-form-item>
        <el-form-item label="年级" prop="njName">
          <el-input v-model="form.njName" placeholder="年级" readOnly/>
        </el-form-item>
        <el-form-item label="专业" prop="zyName">
          <el-input v-model="form.zyName" placeholder="专业" readOnly/>
        </el-form-item>
        <el-form-item label="班级" prop="bjName">
          <el-input v-model="form.bjName" placeholder="班级" readOnly/>
        </el-form-item>
        <el-form-item label="劳动项目" prop="name" v-if="form.type=='1'||form.type=='2'||form.type=='3'||form.type=='9'||form.type=='10'||form.type=='11'">
          <el-input v-model="form.name" placeholder="请输入劳动项目" readOnly/>
        </el-form-item>
        <el-form-item label="劳模报告主题" label-width="100px" prop="name" v-if="form.type=='4'">
          <el-input v-model="form.name" placeholder="请输入劳模报告主题" readOnly/>
        </el-form-item>
        <el-form-item label="项目名称"  prop="name" v-if="form.type=='5'">
          <el-input v-model="form.name" placeholder="请输入项目名称" readOnly/>
        </el-form-item>
        <el-form-item label="比赛名称"  prop="name" v-if="form.type=='6'|| form.type=='7'">
          <el-input v-model="form.name" placeholder="请输入比赛名称" readOnly/>
        </el-form-item>
        <el-form-item label="活动名称"  prop="name" v-if="form.type=='8'">
          <el-input v-model="form.name" placeholder="请输入活动名称" readOnly/>
        </el-form-item>
        <el-form-item label="报告人"  prop="userName" v-if="form.type=='4'">
          <el-input v-model="form.userName" placeholder="请输入报告人" readOnly/>
        </el-form-item>
        <el-form-item label="项目负责人"  prop="proLdUserList" v-if="form.type=='5'">
          <div v-for="item in form.proLdUserList" :key="item.id">
            <el-input v-model="item.stName" placeholder="请输入项目负责人" readOnly/>
          </div>
        </el-form-item>
        <el-form-item label="团队负责人"  prop="proLdUserList" v-if="form.type=='6'">
          <div v-for="item in form.proLdUserList" :key="item.id">
            <el-input v-model="item.stName" placeholder="请输入项目负责人" readOnly/>
          </div>
        </el-form-item>
        <el-form-item label="报告时间" prop="bgTime" v-if="form.type=='4'">
          <el-input value-format="yyyy-MM-dd" v-model="form.bgTime" placeholder="请输入报告时间" readOnly/>
        </el-form-item>
        <el-form-item label="结题时间" prop="bgTime" v-if="form.type=='5'">
          <el-input value-format="yyyy-MM-dd" v-model="form.bgTime" placeholder="请输入结题时间" readOnly/>
        </el-form-item>
        <el-form-item label="比赛时间" prop="bgTime" v-if="form.type=='6'||form.type=='7'">
          <el-input value-format="yyyy-MM-dd" v-model="form.bgTime" placeholder="请输入比赛时间" readOnly/>
        </el-form-item>
        <el-form-item label="活动时间" prop="bgTime" v-if="form.type=='8'">
          <el-input value-format="yyyy-MM-dd" v-model="form.bgTime" placeholder="请输入活动时间" readOnly/>
        </el-form-item>
        <el-form-item v-if="form.type=='1'||form.type=='2'||form.type=='3'||form.type=='9'||form.type=='10'||form.type=='11'" label="开始时间" prop="startTime">
          <el-input value-format="yyyy-MM-dd" v-model="form.startTime" placeholder="请输入开始时间" readOnly/>
        </el-form-item>
        <el-form-item v-if="form.type=='1'||form.type=='2'||form.type=='3'||form.type=='9'||form.type=='10'||form.type=='11'" label="结束时间" prop="stopTime">
          <el-input value-format="yyyy-MM-dd" v-model="form.stopTime" placeholder="请输入结束时间" readOnly/>
        </el-form-item>
        <el-form-item label="主办单位" prop="dwName" v-if="form.type=='7'">
          <el-input v-model="form.dwName" placeholder="请输入主办单位" readOnly/>
        </el-form-item>
        <el-form-item v-if="form.type=='5'||form.type=='6'||form.type=='7'" label="级别" prop="jbName">
          <el-input v-model="form.jbName" placeholder="请输入级别" readOnly/>
        </el-form-item>
        <el-form-item v-if="form.type=='6'||form.type=='7'" label="等级名称" prop="djName">
          <el-input v-model="form.djName" placeholder="请输入等级名称" readOnly/>
        </el-form-item>
        <el-form-item v-if="form.type=='6'" label="位次名称" prop="wcName">
          <el-input v-model="form.wcName" placeholder="请输入位次名称" readOnly/>
        </el-form-item>
        <el-form-item label="劳动地点" prop="position" v-if="form.type=='1'||form.type=='2'||form.type=='3'||form.type=='9'||form.type=='10'||form.type=='11'">
          <el-input v-model="form.position" placeholder="请输入位置" readOnly/>
        </el-form-item>
        <el-form-item label="劳动说明">
          <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 2, maxRows: 10}" readOnly/>
        </el-form-item>
        <el-form-item label="积分数" prop="dfCount" v-if="form.status=='2'||form.status=='3'">
          <el-input  v-model="form.new_count" :min-height="192" readOnly/>
        </el-form-item>
        <el-form-item label="文件" prop="proFileList">
          <div v-for="item in form.proFileList" :key="item.id" class="fileImage">
            <img :src="item.file" alt="" v-if="item.fileType == 'image'"
                 class="w-100 h-150 mr-100 one_overflow w-136 fs-140 col333 pointer" @click="download(item.file)"/>

            <video :src="item.file" controls v-if="item.fileType == 'video'"
                   class="w-100 h-150 mr-100 one_overflow w-136 fs-140 col333 pointer" @click="download(item.file)"/>
            <div class="one_overflow w-200 fs-14 col333 pointer"
                 v-if="item.fileType == 'file'"
                 @click="download(item.file)">{{ item.fileName }}</div>
          </div>
        </el-form-item>
        <el-form-item label="驳回理由"  prop="markName" v-if="form.status=='3'">
          <el-input v-model="form.markName" type="textarea" placeholder="请输入驳回理由"  :readOnly="isReadOnly"/>
        </el-form-item>
        <el-form-item label="评语"  prop="markName" v-if="form.status=='1'||form.status=='2'">
          <el-input v-model="form.markName" type="textarea" placeholder="请输入评语"  :readOnly="isReadOnly"/>
        </el-form-item>

        <el-dialog title = "驳回理由" :visible.sync="open4" :rules="rules" width="400px"  height="1500px" append-to-body class="w-1000 mr-100 ml-100 mt-300 mb-100">
          <el-form-item label="驳回理由"  prop="remarkName">
            <el-input v-model="form.remarkName" type="textarea" placeholder="请输入驳回理由" />
          </el-form-item>
          <el-button  type="primary"  @click="submitReject">确 定</el-button>
          <el-button @click="cancelBh">取 消</el-button>
        </el-dialog>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="submitPass">通过</el-button>
        <el-button   type="primary" @click="rejectRemark">驳回</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>



    <!--  社会公益劳动  -->
    <!-- 添加或修改社会公益劳动对话框 -->
    <el-dialog :title="title" :visible.sync="open10" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="劳动项目" prop="name">
          <el-input v-model="form.name" placeholder="请输入项目名称" readOnly/>
        </el-form-item>
        <el-form-item label="学生姓名" prop="stName">
          <el-input v-model="form.stName" placeholder="请输入用户"  readOnly/>
        </el-form-item>
        <el-form-item label="学号" prop="stNumber">
          <el-input v-model="form.stNumber" placeholder="学号" readOnly/>
        </el-form-item>
        <el-form-item label="学院" prop="xyName">
          <el-input v-model="form.xyName" placeholder="学院" readOnly/>
        </el-form-item>
        <el-form-item label="年级" prop="njName">
          <el-input v-model="form.njName" placeholder="年级" readOnly/>
        </el-form-item>
        <el-form-item label="专业" prop="zyName">
          <el-input v-model="form.zyName" placeholder="专业" readOnly/>
        </el-form-item>
        <el-form-item label="班级" prop="bjName">
          <el-input v-model="form.bjName" placeholder="班级" readOnly/>
        </el-form-item>
        <el-form-item label="劳动时间" prop="bgTime" >
          <el-input value-format="yyyy-MM-dd" v-model="form.bgTime" placeholder="请输入劳动时间" readOnly/>
        </el-form-item>
        <el-form-item label="劳动地点" prop="position">
          <el-input v-model="form.position" placeholder="请输入地点" readOnly/>
        </el-form-item>
        <el-form-item label="劳动说明">
          <el-input v-model="form.content" type="textarea" :autosize="{ minRows: 2, maxRows: 10}" readOnly/>
        </el-form-item>
        <el-form-item label="文件" prop="proFileList">
          <div v-for="item in form.proFileList" :key="item.id" class="fileImage">
            <img :src="item.file" alt="" v-if="item.fileType == 'image'" class="w-100 h-150 mr-100 one_overflow w-136 fs-140 col333 pointer" @click="download(item.file)"/>
            <video :src="item.file" controls v-if="item.fileType == 'video'"
                   class="w-100 h-150 mr-100 one_overflow w-136 fs-140 col333 pointer" @click="download(item.file)"/>
            <div class="one_overflow w-200 fs-14 col333 pointer" v-if="item.fileType == 'file'"  @click="download(item.file)">{{ item.fileName }}</div>
          </div>
        </el-form-item>
        <el-form-item label="评分" v-if="form.status=='2'" prop="new_count">
          <el-input v-model="form.new_count" placeholder="请输入得分" readOnly/>
        </el-form-item>
        <el-form-item  label="评分" prop="fsId" >
          <el-select v-model="form.fsId" placeholder="请选择">
            <el-option
              v-for="item in profsList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="驳回理由"  prop="markName" v-if="form.status=='3'">
          <el-input v-model="form.markName" type="textarea" placeholder="请输入驳回理由"  :readOnly="isReadOnly"/>
        </el-form-item>
        <el-form-item label="评语"  prop="markName" v-if="form.status=='1'||form.status=='2'">
          <el-input v-model="form.markName" type="textarea" placeholder="请输入评语"  :readOnly="isReadOnly"/>
        </el-form-item>
        <el-dialog title = "驳回理由" :visible.sync="open14" :rules="rules" width="400px" height="1500px" append-to-body class="w-1000 mr-100 ml-100 mt-300 mb-100">
          <el-form-item label="驳回理由"  prop="remarkName">
            <el-input v-model="form.remarkName" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-button  type="primary"  @click="submitReject">确 定</el-button>
          <el-button @click="cancelBh">取 消</el-button>
        </el-dialog>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="submitPass">通过</el-button>
        <el-button  type="primary" @click="rejectRemark">驳回</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!--  劳动成果  -->
    <!-- 添加或修改劳动成果报告对话框 -->
    <el-dialog :title="title" :visible.sync="open20" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="学生姓名" prop="stName">
          <el-input v-model="form.stName" placeholder="请输入用户"  readOnly/>
        </el-form-item>
        <el-form-item label="学号" prop="stNumber">
          <el-input v-model="form.stNumber" placeholder="学号" readOnly/>
        </el-form-item>
        <el-form-item label="学院" prop="xyName">
          <el-input v-model="form.xyName" placeholder="学院" readOnly/>
        </el-form-item>
        <el-form-item label="年级" prop="njName">
          <el-input v-model="form.njName" placeholder="年级" readOnly/>
        </el-form-item>
        <el-form-item label="专业" prop="zyName">
          <el-input v-model="form.zyName" placeholder="专业" readOnly/>
        </el-form-item>
        <el-form-item label="班级" prop="bjName">
          <el-input v-model="form.bjName" placeholder="班级" readOnly/>
        </el-form-item>
        <el-form-item label="劳动成果说明">
          <el-input type="textarea" v-model="form.content" :autosize="{ minRows: 2, maxRows: 10}" readOnly />
        </el-form-item>
        <el-form-item label="文件" prop="proFileList">
          <div v-for="item in form.proFileList" :key="item.id" class="fileImage">
            <img :src="item.file" alt="" v-if="item.fileType == 'image'" class="w-100 h-150 mr-100 one_overflow w-136 fs-140 col333 pointer" @click="download(item.file)"/>
            <video :src="item.file" controls v-if="item.fileType == 'video'"
                   class="w-100 h-150 mr-100 one_overflow w-136 fs-140 col333 pointer" @click="download(item.file)"/>
            <div class="one_overflow w-200 fs-14 col333 pointer" v-if="item.fileType == 'file'"  @click="download(item.file)">{{ item.fileName }}</div>

          </div>
        </el-form-item>

        <el-form-item label="评分" v-if="form.status=='2'" prop="new_count">
          <el-input v-model="form.new_count" placeholder="请输入得分" readOnly/>
        </el-form-item>
        <el-form-item  label="评分" prop="fsId">
          <el-select v-model="form.fsId" placeholder="请选择">
            <el-option
              v-for="item in profsList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="驳回理由"  prop="markName" v-if="form.status=='3'">
          <el-input v-model="form.markName" type="textarea" placeholder="请输入驳回理由"  :readOnly="isReadOnly"/>
        </el-form-item>
        <el-form-item label="评语"  prop="markName" v-if="form.status=='1'||form.status=='2'">
          <el-input v-model="form.markName" type="textarea" placeholder="请输入评语"  :readOnly="isReadOnly"/>
        </el-form-item>
        <el-dialog title = "驳回理由" :visible.sync="open24" :rules="rules" width="400px" height="1500px" append-to-body class="w-1000 mr-100 ml-100 mt-300 mb-100">
          <el-form-item label="驳回理由"  prop="remarkName">
            <el-input v-model="form.remarkName" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-button  type="primary"  @click="submitReject">确 定</el-button>
          <el-button @click="cancelBh">取 消</el-button>
        </el-dialog>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="submitPass">通过</el-button>
        <el-button  type="primary" @click="rejectRemark">驳回</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 劳动总结报告   -->
    <!-- 添加或修改劳动总结报告对话框 -->
    <el-dialog :title="title" :visible.sync="open30" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="学生姓名">
          <el-input v-model="form.stName" placeholder="请输入学生姓名" readOnly/>
        </el-form-item>
        <el-form-item label="学号" prop="stNumber">
          <el-input v-model="form.stNumber" placeholder="学号" readOnly/>
        </el-form-item>
        <el-form-item label="学院" prop="xyName">
          <el-input v-model="form.xyName" placeholder="学院" readOnly/>
        </el-form-item>
        <el-form-item label="年级" prop="njName">
          <el-input v-model="form.njName" placeholder="年级" readOnly/>
        </el-form-item>
        <el-form-item label="专业" prop="zyName">
          <el-input v-model="form.zyName" placeholder="专业" readOnly/>
        </el-form-item>
        <el-form-item label="班级" prop="bjName">
          <el-input v-model="form.bjName" placeholder="班级" readOnly/>
        </el-form-item>
        <el-form-item label="劳动说明">
          <el-input v-model="form.content" type="textarea" :autosize="{ minRows: 2, maxRows: 10}" readOnly/>
        </el-form-item>
        <el-form-item label="文件" prop="proFileList">
          <div v-for="item in form.proFileList" :key="item.id" class="fileImage">
            <img :src="item.file" alt="" v-if="item.fileType == 'image'" class="w-100 h-150 mr-100 one_overflow w-136 fs-140 col333 pointer" @click="download(item.file)"/>
            <video :src="item.file" controls v-if="item.fileType == 'video'"
                   class="w-100 h-150 mr-100 one_overflow w-136 fs-140 col333 pointer" @click="download(item.file)"/>
            <div class="one_overflow w-200 fs-14 col333 pointer" v-if="item.fileType == 'file'"  @click="download(item.file)">{{ item.fileName }}</div>
          </div>
        </el-form-item>
        <el-form-item label="评分" v-if="form.status=='2'" prop="new_count">
          <el-input v-model="form.new_count" placeholder="请输入得分" readOnly/>
        </el-form-item>
        <el-form-item label="评分" prop="fsId" >
          <el-select v-model="form.fsId" placeholder="请选择">
            <el-option
              v-for="item in profsList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="驳回理由"  prop="markName" v-if="form.status=='3'">
          <el-input v-model="form.markName" type="textarea" placeholder="请输入驳回理由"  :readOnly="isReadOnly"/>
        </el-form-item>
        <el-form-item label="评语"  prop="markName" v-if="form.status=='1'||form.status=='2'">
          <el-input v-model="form.markName" type="textarea" placeholder="请输入评语"  :readOnly="isReadOnly"/>
        </el-form-item>
        <el-dialog title = "驳回理由" :visible.sync="open34" :rules="rules" width="400px" height="1500px" append-to-body class="w-1000  mr-100 ml-100 mt-300 mb-100">
          <el-form-item label="驳回理由"  prop="remarkName">
            <el-input v-model="form.remarkName" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          <el-button  type="primary"  @click="submitReject">确 定</el-button>
          <el-button @click="cancelBh">取 消</el-button>
        </el-dialog>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPass">通过</el-button>
        <el-button type="primary" @click="rejectRemark">驳回</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>


<script>

import {getNewsList, getUserProfile} from "@/api/system/user";
import {listAll } from "@/api/project/proldAll";
import userAvatar from "@/views/system/user/profile/userAvatar";
import userInfo from "@/views/system/user/profile/userInfo";
import resetPwd from "@/views/system/user/profile/resetPwd";
import {getProld, pass, reject} from "@/api/project/prold";
import {getProldgy, listProldfs, pass as passGy, reject as rejectGy} from "@/api/project/proldgy";
import {getProldcg, pass as passCg, reject as rejectCg} from "@/api/project/proldcg";
import {getProldzj, pass as passZj, reject as rejectZj} from "@/api/project/proldzj";

export default {
  name: "App",
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,},
      pagination: {
        pageNum: 1,
        pageSize: 5, // 每页显示的条数
        totalPages:0
      },
      paginationNews: {
        pageNum: 1,
        pageSize: 8,
        total:0
      },
      total:0,
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo",
      notifications: [
        { id: 1, title: '系统维护通知', time: '2024-09-19 10:00' },
        { id: 2, title: '新学期课程安排', time: '2024-09-20 09:00' },
        // 更多通知...
      ],
      newsList:[],
      showNotificationModal: false, // 控制弹窗显示的状态
      notificationTitle: '系统维护通知', // 通知公告的标题
      notificationContent:'',

      approvalList: [],
      proLdUserList:[],
      profsList:[],

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      open2: false,
      open3: false,
      open4: false,
      open10: false,
      open14: false,
      open20: false,
      open24: false,
      open30: false,
      open34: false,

      // isDisabled: false,
      isReadOnly: false,
      form: {},
      row: {},
      rules: {
        remarkName: [
          { required: true, message: "请输入内容", trigger: "blur" }
        ],
      },
    };
  },

  computed: {
    totalPages() {
      return this.paginationNews.pageNum === Math.ceil(this.paginationNews.totalPages / this.paginationNews.pageSize);
    },
    paginationTotalPages() {
      return this.pagination.pageNum === Math.ceil(this.pagination.totalPages / this.pagination.pageSize);
    },
  },
  watch: {
    approvalList() {
      this.calculateTotalPages();
    },
    newsList() {
      this.calculateTotalPagesNews();
    },
  },
  created() {
    this.getUser();
    this.getNewsLists();
    this.getExaminationApproval();
    this.getlistProldfs();
  },
  methods: {

    changePage(page) {
      this.pagination.pageNum = page;
      // 这里可以调用获取审批列表数据的方法，传递新的页码
      this.getExaminationApproval();
    },

    changePageNews(page) {
      this.paginationNews.pageNum = page;
      // 这里可以调用获取通知列表数据的方法，传递新的页码
      this.getNewsLists();
    },

    calculateTotalPages() {
      const totalItems = this.approvalList.length;
      // this.pagination.totalPages = Math.ceil(totalItems / this.pagination.pageSize);
    },

    calculateTotalPagesNews() {
      const totalItems = this.newsList.length;
      // this.paginationNews.totalPages = Math.ceil(totalItems / this.paginationNews.pageSize);
    },

    openNotificationModal(item) {
      this.notificationTitle = item.name
      this.notificationContent = item.content
      this.showNotificationModal = true; // 打开弹窗
    },
    closeNotificationModal() {
      this.showNotificationModal = false; // 关闭弹窗
    },

    // 通知公告
    getNewsLists() {
      getNewsList(this.paginationNews).then(response => {
        if (response.code !== 200) {
          return this.$notify({
            title: "提示",
            message: response.msg,
          });
        }
        this.newsList = response.rows;
        this.paginationNews.total = response.total
        console.log(this.paginationNews.totalPages,"jsij")
      });
    },

    getExaminationApproval() {
      listAll(this.queryParams).then(response => {
        this.approvalList = response.rows;
        this.total = response.total
      });
    },

    getFormattedSex(sex) {
      const sexMap = { 0: '男', 1: '女' };
      return sexMap[sex] || '未知'; // 如果sex不是1或2，显示'未知'
    },

    getFormattedStatus(number) {
      const statusMap = { 0: '正常', 1: '停用' };
      return statusMap[number] || '未知'; // 如果sex不是1或2，显示'未知'
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },

    download(url) {
      console.log('///',url)
      // window.location.href = url
      window.open(url);
    },

    // 审核方法
    review(item) {
      // 这里可以添加弹窗进行审核操作，或者直接修改状态
      console.log('审核项目:', item);
      this.row = item
      if (item.projectType === "1") {
        // this.open = true
        // const id = item.id;
        // getProld(id).then(response => {
        //   this.form = response.data;
        //   // this.form.status = '2';
        //   this.proLdUserList = response.data.proLdUserList;
        //   //this.isDisabled = false;
        //   this.isReadOnly = false;
        //   this.open = true;
        //   //this.formTitle.markName = "评语";
        //   this.title = "基础劳动审核";
        // });
        const id = item.id
        getProld(id).then(response => {
          if(response.data.proFileList.length>0){
            response.data.proFileList.forEach(item =>{
              item.file = process.env.VUE_APP_BASE_FILE + item.file;
            })
          }
          this.form = response.data;
          // this.form.status = '2';
          this.proLdUserList = response.data.proLdUserList;
          //this.isDisabled = false;
          this.isReadOnly = false;
          this.open = true;
          //this.formTitle.markName = "评语";
          this.title = "基础劳动审核";
        });

      } else if (item.projectType === "2") {
        const id = item.id
        getProldgy(id).then(response => {
          if(response.data.proFileList.length>0){
            response.data.proFileList.forEach(item =>{
              item.file = process.env.VUE_APP_BASE_FILE + item.file;
            })
          }
          this.form = response.data;
          // this.form.status = '2'
          this.proLdUserList = response.data.proLdUserList;
          this.open10 = true;
          //this.isDisabled = false;
          this.isReadOnly = false;
          // this.formTitle.markName = "评语";
          this.title = "社会公益活动审核";
        });

        // const id = item.id
        // getProldgy(id).then(response => {
        //   this.form = response.data;
        //   // this.form.status = '2'
        //   this.proLdUserList = response.data.proLdUserList;
        //   this.open10 = true;
        //   //this.isDisabled = false;
        //   this.isReadOnly = false;
        //   // this.formTitle.markName = "评语";
        //   this.title = "社会公益活动审核";
        // });
      } else if (item.projectType === "3") {
        const id = item.id
        // getProldcg(id).then(response => {
        //   this.form = response.data;
        //   this.proLdUserList = response.data.proLdUserList;
        //   this.open20 = true;
        //   this.isReadOnly = false;
        //   this.title = "审核";
        // });
        getProldcg(id).then(response => {
          if(response.data.proFileList.length>0){
            response.data.proFileList.forEach(item =>{
              item.file = process.env.VUE_APP_BASE_FILE + item.file;
            })
          }
          this.form = response.data;
          this.proLdUserList = response.data.proLdUserList;
          this.open20 = true;
          this.isReadOnly = false;
          this.title = "审核";
        });
      } else if (item.projectType === "4") {
        const id = item.id
        // getProldzj(id).then(response => {
        //   this.form = response.data;
        //   this.proLdUserList = response.data.proLdUserList;
        //   this.open30 = true;
        //   this.isReadOnly = false;
        //   this.title = "审核";
        // });
        getProldzj(id).then(response => {
          if(response.data.proFileList.length>0){
            response.data.proFileList.forEach(item =>{
              item.file = process.env.VUE_APP_BASE_FILE + item.file;
            })
          }
          this.form = response.data;
          this.proLdUserList = response.data.proLdUserList;
          this.open30 = true;
          this.isReadOnly = false;
          this.title = "审核";
        });
      }
    },

    /** 提交按钮 */
    submitPass() {
      if (this.row.projectType === "1") {
        this.form.proLdUserList = this.proLdUserList;
        if (this.form.id != null) {
          pass([this.form]).then(response => {
            this.$modal.msgSuccess("通过成功");
            this.open = false;
            this.getExaminationApproval();
            this.row = {}
          });
        }
      } else if (this.row.projectType === "2") {
        this.form.proLdUserList = this.proLdUserList;
        if (this.form.id != null) {
          passGy([this.form]).then(response => {
            this.$modal.msgSuccess("通过成功");
            this.open10 = false;
            this.getExaminationApproval();
            this.row = {}
          });
        }
      } else if (this.row.projectType === "3") {
        this.form.proLdUserList = this.proLdUserList;
        if (this.form.id != null) {
          passCg([this.form]).then(response => {
            this.$modal.msgSuccess("通过成功");
            this.open20 = false;
            this.getExaminationApproval();
            this.row = {}
          });
        }
      } else if (this.row.projectType === "4") {
        this.form.proLdUserList = this.proLdUserList;
        if (this.form.id != null) {
          passZj([this.form]).then(response => {
            this.$modal.msgSuccess("通过成功");
            this.open30 = false;
            this.getExaminationApproval();
            this.row = {}
          });
        }
      }

    },

    /**驳回-驳回理由 */
    rejectRemark() {
      if (this.row.projectType === "1") {
        this.open4 = true;
      } else if ( this.row.projectType === "2") {
        this.open14 = true;
      } else if (this.row.projectType === "3") {
        this.open24 = true;
      } else if (this.row.projectType === "4") {
        this.open34 = true;
      }

      this.form.markName = '';

    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.open2 = false;
      this.open3 = false;
      this.open10 = false;
      this.open14 = false;
      this.open20 = false;
      this.open24 = false;
      this.open30 = false;
      this.open34 = false;
      this.getExaminationApproval();
      this.row = {}
    },
    cancelBh(){
      this.open4 = false;
      this.open14 = false;
      this.open24 = false;
      this.open34 = false;
      this.form.markName = '';
    },

    /** 提交按钮 */
    submitReject() {
      if (this.row.projectType === "1") {
        this.form.markName = this.form.remarkName;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.proLdUserList = this.proLdUserList;
            if (this.form.id != null) {
              reject([this.form]).then(response => {
                this.$modal.msgSuccess("驳回成功");
                this.open = false;
                this.open4 = false;
                this.getExaminationApproval();
                this.row = {}
              });
            }
          }
        });
      } else if (this.row.projectType === "2") {
        this.form.markName = this.form.remarkName;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.proLdUserList = this.proLdUserList;
            if (this.form.id != null) {
              rejectGy([this.form]).then(response => {
                this.$modal.msgSuccess("驳回成功");
                this.open10 = false;
                this.open14 = false;
                this.getExaminationApproval();
                this.row = {}
              });
            }
          }
        });
      } else if (this.row.projectType === "3") {
        this.form.markName = this.form.remarkName;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.proLdUserList = this.proLdUserList;
            if (this.form.id != null) {
              rejectCg([this.form]).then(response => {
                this.$modal.msgSuccess("驳回成功");
                this.open20 = false;
                this.open24 = false;
                this.getExaminationApproval();
                this.row = {}
              });
            }
          }
        });
      } else if (this.row.projectType === "4") {
        this.form.markName = this.form.remarkName;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.form.proLdUserList = this.proLdUserList;
            if (this.form.id != null) {
              rejectZj([this.form]).then(response => {
                this.$modal.msgSuccess("驳回成功");
                this.open30 = false;
                this.open34 = false;
                this.getExaminationApproval();
                this.row = {}
              });
            }
          }
        });
      }
    },

    getlistProldfs() {
      listProldfs().then(response => {
        this.profsList = response.rows;
      });
    }
  }
};
</script>

<style scoped>
.el-card__body {
  padding: 1px 20px 0px 20px;
}
.el-col-6 {
  width: 100%
}
</style>

<style>
#app {
  display: flex;
  flex-direction: column;
  height: 88vh;
  margin: 0;
  padding: 0;
}

.clearfix {
  font-size: 18px;
  font-weight: bold;
}

.header {
  width: 100%;
}

.header-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 30px
}

.app-container {
  padding: 20px;
  background-color: #ffffff;
  margin-top: -10px;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 320px; /* 根据需要调整宽度 */
  background-color: #ffffff;
  /*padding: 20px;*/
  box-sizing: border-box;
  overflow-y: auto;
  height: 460px;
}


.content {
  /*height: 430px;*/
  flex: 1;
  /*padding: 30px;*/
  overflow-y: auto;
}
.menu-item {
  padding: 22px;
  background-color: #4e6896;
  color: white;
  text-decoration: none;
  border-radius: 22px;
  flex-grow: 5;
  text-align: center;
}

.menu {
  display: flex;
  flex-direction: column;
  padding-top: 45px
}

.menu-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}


.logo {
  text-align: center;
  margin-bottom: 0px;
}

.logo img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.user-info {
  margin-bottom: 20px;
}

.main-content {
  flex: 1;
  box-sizing: border-box;
}

.content {
  display: flex;
  justify-content: space-between;
}

.menu {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.menu-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.menu-row {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.notifications {
  flex: 1;
  padding-left: 20px;
}

.notifications1 {
  flex: 1;
  padding-left: 20px;
  max-width: 600px;
  min-width: 450px;
}

.notification-item {
  padding: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin-bottom: 10px;
}

.notification-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-radius: 8px; /* 可选的圆角边框 */
}
.modal-header {
  display: flex;
  justify-content:  space-between; /* 保持空间在两者之间 */
  align-items: center;
  padding: 10px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
}

.modal-title {
  flex-grow: 1; /* 让标题占据剩余空间 */
  text-align: center; /* 水平居中标题文本 */
}

.close-button {
  cursor: pointer; /* 鼠标悬停时显示指针手势 */
}

/*.modal-header {*/
/*  display: flex;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  padding: 10px;*/
/*  background-color: #f8f8f8;*/
/*  border-bottom: 1px solid #e7e7e7;*/
/*}*/

/*.close-button {*/
/*  background: none;*/
/*  border: none;*/
/*  cursor: pointer;*/
/*  !*font-size: 1.2em;margin-left: auto; !* 将关闭按钮推向右侧 *!*!*/
/*  !*cursor: pointer; !* 鼠标悬停时显示指针手势 *!*!*/
/*}*/

.modal-body {
  height: 600px; /* 限制最大高度 */
  overflow-y: auto; /* 允许垂直滚动 */
  overflow-x: auto; /* 允许水平滚动 */
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  img {
    width: 100% !important;
  }
}

/* 可选的滚动条样式 */
.modal-body::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 滚动条颜色 */
  border-radius: 3px; /* 滚动条圆角 */
}

.modal-body::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条轨道颜色 */
}


.content1 {
  flex: 1;
  overflow-y: auto;
}

.approval-table {
  width: 100%; /* w100: 宽度为100% */
  background-color: #fff; /* bgff: 背景色为白色 */
  border-radius: 20px; /* br-20: 边框半径为20px */
  height: 376px;
  /*padding: 20px; !* p-all-20: 所有方向的内边距为20px *!*/
}


.approval-header {
  display: flex;
  background-color: #f8f8f8;
  padding: 10px;
  font-weight: bold;
  justify-content: space-between;
}

.approval-header span {
  margin-right: 18px; /* 为每个表头元素添加右边距 */
}

.approval-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  padding: 10px;
}

.approval-item span {
  flex: 1;
  margin-right: 10px;
}

.review-button {
  background-color: #409eff;
  border: none;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.review-button:hover {
  background-color: #66b1ff;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  padding: 5px 10px;
  margin: 0 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: pointer;
}

.pagination button:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.pagination span {
  margin: 0 10px;
}


</style>
